<!--
 * @Date: 2023-02-21 13:07:37
 * @LastEditTime: 2023-05-11 18:06:44

 * 介绍:
-->
<script lang="ts" setup>
import { BorderStyle } from "@@/components/types/index";
const props = withDefaults(
  defineProps<{
    /**背景颜色 */
    bg?: string | false;
    shadowColor?: string;
    shadow?: boolean;
    minHeight?: string;
    borderStyle?: BorderStyle;
    borderColor?: string;
    borderWidth?: string;
  }>(),
  {
    shadowColor: "rgba(0,0,0,0.2)",
    shadow: false,
    borderStyle: "solid",
    borderWidth: "0.5rem",
    borderColor: "var(--C-T1-O1)",
    bg: "var(--C-B1)",
  }
);
</script>

<template>
  <div
    :style="{
      '--Ccard-bg': props.bg || 'none',
      '--SHc': props.shadowColor,
      minHeight: props.minHeight,
      borderStyle: props.borderStyle,
      borderColor: props.borderColor,
      borderWidth: props.borderWidth,
    }"
    class="Ccard"
    :class="{ shadow: props.shadow }"
  >
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.Ccard {
  padding: var(--gap-md);
  background: var(--Ccard-bg);
  border-radius: var(--R-md);
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
